import React, { useState } from 'react';
import '@/views/Index/SwiperAdd/SwiperAdd.scss'
import { useNavigate } from "react-router-dom";
import Nav from '../../../components/Nav/Nav'
import service from '../../../api/index'


import {
    Form,
    Input,
    Button,
    message,
} from 'antd';


interface Props {

}

function SwiperAdd(props: Props) {

    let navigate = useNavigate()

    const [form] = Form.useForm()

    let [img, setImg] = useState<any>('')

    let onChange = (e: any) => {
        // console.log(e.target.files[0]);
        // 将文件对象转换为base64编码后的字符串
        let reader = new FileReader()
        reader.readAsDataURL(e.target.files[0])
        reader.onload = function () {
            // console.log(this.result);
            // this.result 拿到的是所选中的文件的全部内容(以base64编码的格式显示的字符串)
            form.setFieldValue('img', this.result)


        }

    }

    // 添加轮播图数据
    let onFinish = async (formvalues: any) => {
        // console.log(formvalues);
        let { upload, ...values } = formvalues

        let res = await service.banner.banner_add(values)
        // console.log(res.data);
        if (res.data.code == '200') {
            message.success({
                content: res.data.message,
                style: {
                    marginTop: '20vh',
                },
            })
            navigate('/index/swiper')
        } else {
            message.error({
                content: res.data.message,
                style: {
                    marginTop: '20vh',
                },
            })
        }

    }


    return (
        <div className='swiper_add'>
            <Nav />
            <Form
                form={form}
                className="form"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 14 }}
                layout="horizontal"
                onFinish={onFinish}
            >
                <Form.Item
                    label="link"
                    name="link"
                    rules={[{ required: true, message: '请输入图片的链接' }]}
                >
                    <Input placeholder='输入图片的链接' />
                </Form.Item>
                <Form.Item
                    label="alt"
                    name="alt"
                    rules={[{ required: true, message: '请输入图片的alt' }]}
                >
                    <Input placeholder='请输入alt' />
                </Form.Item>
                <Form.Item className='upload'
                    label="upload"
                    name="upload"
                    rules={[{ required: false, message: '请选择图片' }]}
                >
                    <Input type='file' onChange={onChange} />
                </Form.Item>
                <Form.Item
                    label="base64"
                    name="img"
                    rules={[{ required: false, message: '请选择图片' }]}
                >
                    <Input value={img} disabled placeholder='选择图片后自动填充' />
                </Form.Item>
                <Form.Item>
                    <Button className='btn' type="primary" htmlType="submit">
                        提交
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
}
export default SwiperAdd;